


        .overHalf.ready.content>*,
        .overHalf.ready .content>*{
            opacity: 0;
            transform: translateY(20px);
            transition-duration: .6s;
            transition-property: opacity,transform;
        }
        .overHalf.frozen.content>*,
        .overHalf.frozen .content>*{
            opacity: 1;
            transform:translateY(0px);
        }      
        .animateBottle{
            position: absolute;
            transform-origin: 50% 0%;
            opacity: .9;
            z-index: 40;
        }
        .animateBottle.big{
            width: 15vw;
            max-width: 70px;
            transition: transform 1.5s cubic-bezier(0.26, 0.01, 0.14, 1);
            transform: translate3d(0px,0px,0px) rotate(25deg);
        }
        
        .animateBottle.big.posLeft{
            transform: translate3d(-620px,-50%,0) rotate(0deg);
        }
        
        .animateBottle.big.outRight{
            transform: translate3d(65vw,-30vh,0) rotate(-90deg);
        }
        .animateBottle.big.beginning,
        .animateBottle.big.outLeft{
            transform: translate3d(-65vw,-30vh,0) rotate(90deg);
            transition: initial;
        }
        .in .rotateSelf{
            animation-name: bottle1;
        }
        .rotateSelf{
            background-image: url(../../img/common/bottle-min.png);
            background-size: cover;
            background-repeat: no-repeat;
            --aspect-ratio:1 / 3.94;
            animation-name:none ;
            animation-fill-mode: forwards;
            animation-timing-function: steps(80);
            animation-duration: 2.5s;
        }
        .mobileDevice .animateBottle.small{
            display: none;
        }
        .animateBottle.small{
            left: calc(50% - 540px);
            top: 20vw;
            width: 20vw;
            max-width: 70px;
            transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
            transform:translate3d(0, 0, 0) rotateZ(-25deg);
        }
        .animateBottle.small.beginning{
            transform:translate3d(-60vw, -60vh, 0) rotateZ(90deg);
        }
        @keyframes bottle1{
            from{background-position: 0% 0px;}
            to{background-position: 100% 0px;}
        }
        @keyframes bottle2{
            from{background-position: 0% 0px;}
            to{background-position: 100% 0px;}
        }
        .animateBottle .rotateSelf::before{ content: '';
            display: block;
            padding-bottom: calc(100% / (var(--aspect-ratio)));
        }
        .wavePic{
            display: block;
            margin:0px auto;
            padding-top: 30px;
            margin-bottom: 55px;
        }
        .mainHead .title{
            position: relative;
            margin:0px 30px;
            margin-top: 50px;
            margin-bottom: 150px;
        }
        .mainHead .title .txt{
            position: relative;
            z-index: 2;
        }
        .mainHead .title .txt h1{
            filter: url(#water);
            font-size: 150px;
            text-align: right;
            line-height: 150px;
            letter-spacing: 20px;
            padding-bottom: 65px;
        }
        .mobileDevice .mainHead .title .txt h1{
            filter: initial;
        }
        main.ready .mainHead .title .txt h1{
            opacity: 0;
            transition: opacity 2s linear .7s;
        }
        main.frozen .mainHead .title .txt h1{
            opacity: 1;
        }
        .mainHead .title .bg{
            width: 80%;
            position: absolute;
            padding-bottom: 80%;
            top: 50%;
            left: 50%;
            background-size: 12.5%;
        }
        .mainHead .title .bg.ready{
            transition: opacity .7s linear,transform .7s cubic-bezier(0, 0, 0, 0.98);
        }
        .mainHead .title .bg.ready{
            opacity: 0;
            transform: translate(-50%,50px);
        }
        .mainHead .title .bg.frozen{
            opacity: 1;
            transform: translate(-50%,0%);
        }
        .content{
            padding:150px 30px;
            color: #fff;
            margin: 0px auto;
            width:40%;
            position: relative;
            z-index:2;
        }
        .content>p{
            margin-bottom:20px;
            text-align: center;
            letter-spacing: 5px;
            line-height: 25px;
            font-size: 16px;
            max-width: 420px;
            margin-left:auto;
            margin-right: auto;
        }
        .content>p:first-child{
            letter-spacing: 5px;
            margin-bottom: 0px;
        }
        .mobileDevice footer{
            overflow-x: hidden;
        }
        footer .palace>.box{
            display: block;
            width: 100%;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 105px;
            height: 100vh;
        }
        footer .palace>.box .contn{
            position: relative;
            height: 100%;
        }
        footer .bg{
            height: 100%;
            background-size: 25%;
            width: 100%;
            position: absolute;
        }
        footer .contn .details{
           position: relative;
           width: 100%;
        }
        
        footer .contn .details .screen{
            position: absolute;
            width: 100vw;
            top:100%;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            white-space: nowrap;
        }
        footer .contn .details .screen .roll{
            height: 100%;
        }
       
        footer .contn .details .screen h1{
            line-height: 72px;
            font-weight: normal;
            font-size: 72px;
            letter-spacing: 5px;
            animation: slide 18s linear infinite;
        }
        
        @media(max-width:1050px){
            .mainHead .content{
                width: 60%;
            }
            .mainHead .title .txt h1{
                font-size: 11.5vw;
                letter-spacing: 5px;
                line-height: 1em; padding-bottom: 0px;
            }
        }
        @media (min-width:1025px){
            .content>p{
                padding: 0px;
            }
        }
        @media (max-width:1024px){
            .content>p{
                padding-left:10px;
                padding-right: 10px;
            }
        }
        @media(min-width:768px){
            footer .palace>.box .contn .bg{
                width: 40%;
                left: 0px;
                right: 0px;
                margin: auto;
            }
        }
        @media(max-width:767px){
            .mainHead{
                margin-top: 50px;
            }
            .mainHead .title .txt h1{
                padding-bottom: 0px;
            }
            
            .mainHead .title{
                margin: 0px;
                margin-bottom: 105px;
            }
            .mainHead .title .bg{
                width: 100%;
                padding-bottom: 100%;
            }
            .content{
                width: 100% !important;
                padding: 60px 10px;
            }
            
            footer .palace>.box{
                padding-left: 10px;
                padding-right: 10px;
            }
           
        }
        
        
        @media (min-width:650px){
            .animateBottle.big{
                width: 10vw;
                max-width: 140px;
            }
        }
        @media (max-width:450px){
            .content{
                padding:60px 10px
            }
            .wavePic{
                width: 220px;
            }
        }